<template>
  <div class="ss-picker">
    <van-field
      :label-width="labelWidth"
      label-class="label-text"
      input-align="center"
      label-align="center"
      :label="label"
      :value="value"
      @click="open"
      readonly
    />
    <van-popup
      v-model="show"
      :close-on-click-overlay="false"
      position="bottom"
    >
      <van-picker
        :columns="columns"
        :value-key="valueKey"
        show-toolbar
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'ssPicker',
  model: {
    prop: 'selectValue',
    event: 'select'
  },
  props: {
    selectValue: {
      type: Object
    },
    show: {
      type: Boolean,
      default: false
    },
    label: {
      type: String
    },
    value: {
      type: String
    },
    columns: {
      type: Array
    },
    labelWidth: {
      type: String
    },
    valueKey: {
      type: String,
      default: 'label'
    }
  },
  methods: {
    open () {
      this.$emit('open')
    },
    close () {
      this.$emit('close')
    },
    // 确认
    confirm (val) {
      this.$emit('select', val)
      this.close()
    },
    // 取消
    cancel () {
      this.close()
    }
  }
}
</script>

<style scoped>
>>> .label-text {
  font-weight: 700;
}
</style>
